<template>
  <div class="search">
    <h1 class="logoArea">
      <RouterLink class="logo" :to="{ name: 'home' }">
        <img src="./images/logo.png" alt="">
      </RouterLink>
    </h1>
    <div class="searchArea">
      <div class="searchForm">
        <input type="text" id="autocomplete" class="input-error input-xxlarge" v-model="keyword"/>
        <button class="sui-btn btn-xlarge btn-danger" type="button"
                @click="$emit('search', keyword)">搜索
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="TopSearch">
import {ref, watchEffect} from 'vue';
import {useRoute} from "vue-router";

let keyword = ref("");
const route = useRoute();
watchEffect(() => {
  keyword.value = route.query?.keyword as string;
})
</script>

<style scoped lang="less">
.search {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;

  .logoArea {
    float: left;

    .logo {
      img {
        width: 175px;
        margin: 25px 45px;
      }
    }
  }

  .searchArea {
    float: right;
    margin-top: 35px;

    .searchForm {
      overflow: hidden;

      input {
        box-sizing: border-box;
        width: 490px;
        height: 32px;
        padding: 0px 4px;
        border: 2px solid #ea4a36;
        float: left;

        &:focus {
          outline: none;
        }
      }

      button {
        height: 32px;
        width: 68px;
        background-color: #ea4a36;
        border: none;
        color: #fff;
        float: left;
        cursor: pointer;

        &:focus {
          outline: none;
        }
      }
    }
  }
}
</style>
